import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { getEcCom } from '../../util/convert';
import * as _ from '../../util/public/common';

@inject('globalStore', 'layoutStore')
@observer
export default class SelectElement extends React.Component{
    doChangeEvent = (value) => {
        const { layoutStore,fieldMark } = this.props;
		layoutStore.changeSingleFieldValue(fieldMark, {value: value});
    }
    render() {
        const { WeaSelect } = getEcCom();
        const { layoutStore,globalStore } = this.props;
        const { variableMap } = layoutStore;
        const { commonParam } = globalStore;
        const { fieldMark,fieldAttr,symbol,rowIndex,cellObj,fieldObj } = this.props;
        let { baseProps } = this.props;
        const { variable } = fieldObj;
        let { fieldid,detailtype,viewAttr,value } = baseProps;
        if(detailtype === 0){   //系统单据默认为选择框
            detailtype = 1;
        }
        //打印模式下radio框只显示选中值
        if(commonParam.isprint === "1" && detailtype === 3 && variableMap.get(`radioPrintText_${fieldid}`) === true){
            detailtype = 1;
        }
        baseProps.detailtype = detailtype;

        const optionRange = variable.has("optionRange") ? variable.get("optionRange") : null;
        const filterOptionRange = variable.has("filterOptionRange") ? variable.get("filterOptionRange") : null;
        let options = [];
        if(detailtype === 1)    //下拉选择框才需要空选项
            options.push({ 'key': '', 'showname': '' });

        if(fieldAttr.htmltype !== 5){   //字段类型变更为选择框情况
            const changeFieldTypeSelectOption = mobx.toJS(variable.get("changeFieldTypeSelectOption")) || [];
            options = options.concat(changeFieldTypeSelectOption);
        }else{
            const { selectattr } = fieldAttr;
            const itemList = selectattr.selectitemlist;
            itemList && itemList.map(item => {
                const selectvalue = item.selectvalue.toString();		//必须转字符串
                if(item.cancel === 1 && ((viewAttr === 1 && selectvalue !== value) || viewAttr === 2 || viewAttr === 3))
                    return true;
                if(optionRange !== null && _.indexOf(optionRange,selectvalue) === -1)	//选择框联动控制范围
                    return true;
                if(filterOptionRange !== null && _.indexOf(filterOptionRange,selectvalue) > -1)   //接口控制remove选项
                    return true;
                options.push({"key":selectvalue, "showname":item.selectname});
            });
            baseProps.fieldshowtypes = selectattr.fieldshowtypes;
        }
        baseProps.options = options;
        // baseProps.widthMatchOptions = true;
        baseProps.dropdownMatchSelectWidth  = false;
        if(viewAttr !== 1)
            baseProps.style = {...baseProps.style, ...{'min-width':`${baseProps.isDetail ? 55 : 100}px`}};

        return(
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@vm269g`}  
                {...baseProps}
                supportCancel={viewAttr === 2} 
                onChange={this.doChangeEvent}
            />
        )
    }
}